<template>
  <div>
    <!-- 头部搜索 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="left"
      background="#4bd863"
      left-icon="none"
      right-icon="search"
      @search="search"
      show-action
    >
    <template #action>
    <div @click="search" style="color:#fff">搜索</div>
  </template>
      <template #left>
        <div class="location">
          <van-icon
            name="arrow-left"
            size="1.8rem"
            color="white"
            style="margin-left: -10px"
            @click="back"
          />
        </div>
      </template>
    </van-search>
    <div class="searchHot">
      <div class="title">大家都在看：</div>

      <div class="box">
        <div class="message">黑美人西瓜</div>
        <div class="message">美国甜橙</div>
        <div class="message">新西兰新品水蜜桃</div>
        <div class="message">新西兰新品水蜜桃</div>
        <div class="message">新西兰新品水蜜桃</div>
      </div>
    </div>
    <div class="searchHot">
      <div style="display:flex;justify-content:space-between">
        <div class="title">历史搜索记录：</div>
        <div style="font-size: 10px; color: rgb(196, 185, 185);margin:15px">清空历史记录</div>
      </div>
      <div class="box">
        <div class="message">黑美人西瓜</div>
        <div class="message">美国甜橙</div>
        <div class="message">新西兰新品水蜜桃</div>
        <div class="message">新西兰新品水蜜桃</div>
        <div class="message">新西兰新品水蜜桃</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
      return {
          value:''
      }
  },
  methods: {
      back(){
          this.$router.back()
      },
      search(){
          console.log(1);
      }
  },
};
</script>

<style lang="less" scoped>
.searchHot {
  .title {
    margin: 15px;
    font-size: 10px;
    color: rgb(196, 185, 185);
  }
  .message {
    margin: 10px;
    border-radius: 10px;
    padding: 5px;
    background: #f2f2f2;
    font-size: 10px;
    display: inline-block;
    color: #bcbab8;
  }
}
</style>